<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<style>
    #div1 {
        width: 20px;
        height: 20px;
        background-color: aqua
    }
    
    #div2 {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
    
    #div3 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    a {
        width: 500px;
        height: 200px;
    }
</style>

<body>
    <!-- 
    
        vue中过滤器分为全局过滤器 组件过滤器 局部过滤器 -
    全局是filter 局部是filters 
    用法 {{|}} 双花括号的插值 以及 v-bind表达式中使用 
    v-bind：data="'ok'|globalFilter"
    过滤器的调用和参数写法
    1.{{xx|FILTER A| FILTER B}} MESSAGE作为参数传给函数A 函数A的返回值作为参数传给B
    2.{{xx|filterA('arg1','arg2')}} 给filterA参入两个参数分别是arg1 ，arg2
    3.{{'a','b'|filterB}} :'a','b'分别作为参数传给filterB
 
     过滤器：选择除满足过滤条件的内容 和linux中|类似
    
    过滤器个人总结：过滤器局部会代替整体；
    过滤器的作用是筛选是使用|后面的函数筛选出|前面的内容 然后可以选择给
        |前面内容的返回值
        注意****** v-bind 关联的是属性 不要搞混 因此 给他返回值只是作用于这个元素的属性设置
        ********** {{}} 而括号的是文本，因此给他返回值返回的是作用于这个元素的文本显示
    -->

    <div class="app">
        {{message|capitalize}}
        <div v-for="site in sites">
            <div v-bind:id="site|formoatId"></div>
        </div>
        <a v-bind:href="test|testFilter">{{test|content}}</a>
    </div>
    <script>
        // 全局过滤器
        Vue.filter('capitalize', function(value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        })
        new Vue({
            el: ".app",
            data: {
                message: "jkd ja jd laj da k",
                test: {
                    src: "http://wwwvv.baidu.com"
                },
                sites: [{
                    src: "1"
                }, {
                    src: "2"
                }, {
                    src: "3"
                }, ]
            },
            /*
             * filters 是vue中的过滤器---本地过滤器
             */
            filters: {
                formoatId: function(value) {
                    // value就是message
                    if (value.src == "1") {
                        return value = "div1"
                    };
                    if (value.src == "2") {
                        return value = "div2"
                    };
                    if (value.src == "3") {
                        return value = "div3"
                    };

                },
                testFilter: function(v) {
                    // v就是test 现在要将test进行条件筛选
                    return v = v.src
                },
                content: function(v) {
                    if (v.src == "http://www.baidu.com") {
                        return v = "百度"
                    } else {
                        return v = "搜狐"
                    }
                }

            }
        })
    </script>
</body>

</html>